<template>
	<view class="flexbox" @click="getOrderInfo">
		<view class="order_image" @click.stop="getProductInfo">
			<u-image :src="orderInfo['productCover']" mode="aspectFill" height="200rpx"></u-image>
		</view>
		<view class="order_info">
			<view class="order_info_title" @click.stop="getProductInfo">
				{{orderInfo['productVariety'] + "-" + orderInfo['productSpecies'] | strLength(10)}}
			</view>
			<view class="order_info_other">单价：{{orderInfo['unitPrice']}} ￥</view>
			<view class="order_info_other">重量：{{orderInfo['orderWeight']}}/kg</view>
			<view class="order_info_other">日期：{{orderInfo['createTime'] | strLength(10)}}</view>
		</view>
		<view class="order_state">
			<view class="order_state_text">{{orderStatus}}</view>
			<u-icon v-if="deleteStatus" label="删除" size="48" name="trash" labelSize="26"></u-icon>
		</view>
	</view>
</template>

<script>
	import {orderState} from "utils/enums/order"
	export default {
		data() {
			return {}
		},
		props: ['orderInfo'],
		computed: {
			deleteStatus() {
				const {
					orderStatus
				} = this.orderInfo
				const delStatusList = [3, 4] //允许删除的订单状态列表
				return delStatusList.includes(orderStatus)
			},
			orderStatus() {
				// 订单状态（1，待签字 2 ；已签字，3，拒绝签字，4交易成功）
				const {
					orderStatus
				} = this.orderInfo
				switch (orderStatus) {
					case orderState.toBeSigned:
						return "待签字";
					case orderState.havaSign:
						return "已签字";
					case orderState.refuseToSign:
						return "拒绝签字";
					case orderState.orderSuccess:
						return "交易成功";
					default:
						return "状态不存在"
				}
			}
		},
		methods: {
			getProductInfo(){
				const {type,productId:id} = this.orderInfo
				this.pushNewPage("product", {
					id,
					type
				})
			},
			getOrderInfo(){
				const {orderInfo:{id},orderStatus} = this
				this.pushNewPage("order_state",{id,stateName:orderStatus})
			}
		}
	}
</script>

<style scoped>
	.flexbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 15rpx 0;
		height: 220rpx;
		box-shadow: 0 0 10rpx rgb(175, 175, 175);
		border-radius: 10rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.order_image {
		height: 100%;
		width: 240rpx;
		overflow: hidden;
	}

	.order_info {
		height: 100%;
		flex-grow: 2;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order_state {
		height: 100%;
		flex-grow: 1;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		box-sizing: border-box;
		padding: 5rpx 10rpx;
	}

	.order_info_title {
		font-size: 32rpx;
		font-weight: 530;
		letter-spacing: 0px;
		color: rgba(56, 56, 56, 1);
		text-align: left;
		vertical-align: top;
	}

	.order_info_other {
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0px;
		color: rgba(112, 112, 112, 1);
	}

	.order_state_text {
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(255, 87, 51, 1);
	}
</style>
